<template>
  <el-dialog
  title="属性"
  :visible.sync="dialogVisible"
  width="20%"
  :append-to-body="true"
  :before-close="handleClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="0px">
      <el-form-item prop="condition">
        <el-input v-model="form.condition" type="textarea" rows="5"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { Graph } from '@antv/x6'
import { setEdgeLabel } from '../graph-layout/index'

export default {
  name: 'EdgeProperty',
  props: {
    visible: {
      type: Boolean,
      default: ()=>  false
    },
    nodeId: {
      type: String,
      default: ()=> null
    },
    graph: {
      type: Graph,
      default: ()=> null
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if(val) {
          this.checkIsAddProperty()
        }
      }
    }
  },
  data() {
    return {
      form: {
        condition: ''
      },
      rules: {
        condition: [{required: true, message: '请输入审核条件', trigger: 'blur,change'}]
      },
    }
  },
  methods: {
    checkIsAddProperty() {
      const node = this.graph.getCellById(this.nodeId)
      const sourceObj = node.getSource()
      if(!sourceObj) this.handleClose()

      const sourceNode = this.graph.getCellById(sourceObj.cell)
      const nodeType = sourceNode.prop('attrs/type')
      if(!nodeType || nodeType !== 'judge') {
        this.$message.error('只有来源是判断节点，才可设置审批条件')
        this.handleClose()
      }
    },

    // 提交表单数据
    submitForm() {
      this.$refs.form.validate((valid)=> {
        if(valid){
          const node = this.graph.getCellById(this.nodeId)
          setEdgeLabel(node, this.form.condition)
          this.handleClose()
        }
      })
    },

    // 关闭
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>